<template>
  <div class="weiquan">
    <van-nav-bar class="nav_bar" title="我的维权" fixed @click-left="onClickLeft" />
    <div class="list">
      <van-list v-model="loading" :finished="finished" :finished-text="list.length > 0 ? '没有更多了' : ''" @load="onLoad">
        <div v-for="(v, i) in list" :key="i" class="item">
          <div class="t1 flex">
            <div class="l1">诉求人：{{ v.memberName }}</div>
            <div class="tag">
              <van-tag :type="tagType(v.status)" :color="tagType(v.status)">{{
                tagName(v.status)
              }}</van-tag>
            </div>
          </div>
          <div class="t1">问题描述： {{ v.description }}</div>
          <div class="t1">提交时间：{{ v.createTime }}</div>
          <div v-if="v.feedBack" class="t1">客服反馈：{{ v.feedBack }}</div>
          <div class="t1">维权进度：{{ tagName(v.status) }}</div>
        </div>
        <van-empty v-if="list.length == 0 && !loading" description="暂无维权信息" />
      </van-list>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  components: {},
  props: {},
  data() {
    return {
      pageInfo: {
        pageSize: 10,
        pageNum: 1,
      },
      list: [],
      loading: false,
      finished: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async getWeiquanList() {
      let res = await api.getWeiquanList({
        ...this.pageInfo,
        type: 1,
      });
      this.list = [...this.list, ...res.data];
      if (res.data.length < this.pageInfo.pageSize) {
        this.finished = true;
      } else {
        this.pageInfo.pageNum++;
      }
      this.loading = false;
    },
    onLoad() {
      this.getWeiquanList();
    },
    tagName(status) {
      if (status == 0) {
        return "审核中";
      } else if (status == 1) {
        return "处理中";
      } else if (status == 97) {
        return "已驳回";
      } else if (status == 100) {
        return "已完成";
      } else if (status == 98) {
        return "已失效";
      } else {
        return "已取消";
      }
    },
    tagType(status) {
      if (status == 0) {
        return "primary";
      } else if (status == 1) {
        return "danger";
      } else if (status == 100) {
        return "success";
      } else {
        return "#7232dd";
      }
    },
  },
  created() { },
  mounted() { },
};
</script>
<style lang="less" scoped>
.weiquan {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  background-color: #fff;
  padding: 150px 0;

  .nav_bar {
    background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
    background-size: cover;
    background-position: top center;

    /deep/ .van-icon {
      font-size: 60px;
      font-weight: bold;
      color: #fff;
    }

    /deep/.van-nav-bar__title {
      color: #fff;
    }
  }

  /deep/ .van-hairline--bottom::after {
    border: unset;
  }

  .list {
    margin-top: 30px;
    padding: 0 30px 60px 30px;

    .item {
      margin-bottom: 25px;
      padding: 40px;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .t1 {
        font-size: 44px;
        color: #000;
        padding: 15px 0;
      }

      .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
</style>
